import { computed } from 'vue';
import type { AppContext } from '@/common/hooks';
import { px2rpx } from '../utils';
import type { pageLink } from '../type';
import { page } from '@/common/utils';
import { useInit, useLayout } from '@/common/stores';
type Option = {
	paddingTop?: number;
	paddingBottom?: number;
	paddingX?: number;
	radiusTop?: number;
	radiusBottom?: number;
	backgroundColor?: string;
	bodyBackgroundColor?: string;
	styleType?: 0 | 1 | 2;
} & Record<string, any>;

export const useLayoutCompoments = (ctx: AppContext, option: Option) => {
	const viewStyle = computed(() => {
		let style: Record<string, any> = {
			padding: `${px2rpx(option.paddingTop)} ${px2rpx(option.paddingX)} ${px2rpx(option.paddingBottom)} ${px2rpx(option.paddingX)}`
		};
		if (option.backgroundColor) {
			style['backgroundColor'] = option.backgroundColor;
		}
		return style;
	});

	const bodyClass = computed(() => {
		return option.styleType == 1 ? 'shadow' : option.styleType == 2 ? 'border-dc' : '';
	});

	const bodyBoxStyle = computed(() => {
		let style: Record<string, any> = {
			borderRadius: `${px2rpx(option.radiusTop)} ${px2rpx(option.radiusTop)} ${px2rpx(option.radiusBottom)} ${px2rpx(option.radiusBottom)}`
		};
		if (option.bodyBackgroundColor) {
			style['backgroundColor'] = option.bodyBackgroundColor;
		}

		return style;
	});

	const initStore = useInit();
	const layoutStore = useLayout();

	const jumpLink = (link: pageLink, pageTitle?: string) => {
		ctx.$layoutGoTo(link,pageTitle)
	};

	return {
		viewStyle,
		bodyClass,
		bodyBoxStyle,
		jumpLink
	};
};
